<style lang="less">
@import "./basicInformation.less";
</style>
<template>
  <div class="search">
    <Row>
      <Col>
        <Card>
          <Row>
            <Form
              ref="searchForm"
              :model="searchForm"
              inline
              :label-width="100"
              @submit.native.prevent
              class="search-form"
            >
              <Form-item label="车主姓名" prop="username">
                <Input
                  type="text"
                  v-model="searchForm.username"
                  clearable
                  placeholder="请输入车主姓名"
                  style="width: 200px"
                />
              </Form-item>

              <Form-item style="margin-left:-35px;" class="br">
                <Button @click="handleSearch" type="primary" icon="ios-search">搜索</Button>
                <Button @click="handleReset">重置</Button>
              </Form-item>
            </Form>
          </Row>
          <Row class="operation">
            <Button @click="add" v-has="'add'" type="primary" icon="md-add">添加车主</Button>
          </Row>
          <!-- <Row>
          <Alert show-icon>
            已选择
            <span class="select-count">{{selectCount}}</span> 项
            <a class="select-clear"
               @click="clearSelectAll">清空</a>
          </Alert>
          </Row>-->
          <Row>
            <Table
              :loading="loading"
              border
              max-height="600"
              :columns="columns"
              :data="data"
              sortable="custom"
              @on-sort-change="changeSort"
              @on-selection-change="showSelect"
              ref="table"
            ></Table>
            <!-- <Table :columns="exportColumns"
                 :data="exportData"
                 ref="exportTable"
            style="display:none"></Table>-->
          </Row>
          <Row type="flex" justify="end" class="page">
            <Page
              :current="searchForm.current"
              :total="total"
              :page-size="searchForm.size"
              @on-change="changePage"
              @on-page-size-change="changePageSize"
              :page-size-opts="[10,20,50,100]"
              size="small"
              show-total
              show-elevator
              show-sizer
            ></Page>
          </Row>
        </Card>
      </Col>
    </Row>

    <Modal
      :title="modalTitle"
      v-model="basicInfoModalVisible"
      :mask-closable="false"
      :width="600"
      :styles="{top: '30px'}"
    >
      <Form ref="basicInfoForm" :model="basicInfoForm" :label-width="140" :rules="rulesForm">
        <Form-item label="车主姓名" prop="username">
          <Input
            type="text"
            v-model="basicInfoForm.username"
            clearable
            placeholder="请输入车主姓名"
            style="width: 350px"
          />
        </Form-item>
        <Form-item label="昵称" prop="nickname">
          <Input
            type="text"
            v-model="basicInfoForm.nickname"
            clearable
            placeholder="请输入昵称"
            style="width: 350px"
          />
        </Form-item>

        <Form-item label="性别" prop="gender">
          <RadioGroup v-model="basicInfoForm.gender">
            <Radio :label="1">男</Radio>
            <Radio :label="2">女</Radio>
          </RadioGroup>
        </Form-item>

        <Form-item label="手机号" prop="mobile">
          <Input
            type="text"
            v-model="basicInfoForm.mobile"
            clearable
            placeholder="请输入手机号"
            style="width: 350px"
          />
        </Form-item>
        <Form-item label="邮箱" prop="email">
          <Input
            type="text"
            v-model="basicInfoForm.email"
            clearable
            placeholder="请输入邮箱"
            style="width: 350px"
          />
        </Form-item>
      </Form>
      <div slot="footer">
        <Button type="text" @click="basicInfoModalVisible = false">取消</Button>
        <Button type="primary" :loading="submitLoading" @click="submit">提交</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import dayjs from "dayjs";
import {
  getDriverPageList,
  addDriver,
  deleteDriver,
  updateDriver,
  getCompanyCombo
} from "@/api/index";
import { validateMobile, validateEMail } from "@/libs/validate";
import departmentChoose from "../../my-components/xboot/department-choose";
import departmentTreeChoose from "../../my-components/xboot/department-tree-choose";
import uploadPicInput from "../../my-components/xboot/upload-pic-input";
import circleLoading from "../../my-components/circle-loading.vue";
import checkPassword from "@/views/my-components/xboot/check-password";
import util from "@/libs/util.js";

export default {
  name: "basic-information",
  components: {
    circleLoading,
    departmentChoose,
    departmentTreeChoose,
    uploadPicInput,
    checkPassword
  },
  data() {
    return {
      loading: false,
      basicInfoModalVisible: false,
      total: 0,
      data: [],
      searchForm: {
        username: "",
        createBy: "",
        createDate: "",
        current: 1,
        size: 20
      },
      basicInfoForm: {
        clinetId: "",
        deptId: "",
        username: "",
        nickname: "",
        gender: "",
        mobile: "",
        email: "",
        createBy: "",
        createDate: ""
      },
      rulesForm: {
        username: [
          { required: true, message: "车主姓名不能为空", trigger: "blur" }
        ],
        gender: [
          {
            required: true,
            message: "性别不能为空",
            trigger: "change",
            type: "integer"
          }
        ],
        email: [
          { required: true, message: "邮箱不能为空", trigger: "blur" },
          { validator: validateEMail }
        ],
        mobile: [
          { required: true, message: "手机号不得为空", trigger: "blur" },
          { validator: validateMobile }
        ]
      },
      columns: [
        {
          title: "序号",
          type: "index",
          width: 65,
          align: "center",
          fixed: "left"
        },
        {
          title: "车主姓名",
          key: "username",
          minWidth: 140,
          sortable: true,
          align: "center",
          fixed: "left"
        },
        {
          title: "昵称",
          key: "nickname",
          width: 200,
          sortable: true,
          align: "center",
          fixed: "left"
        },
        {
          title: "性别",
          key: "gender",
          align: "center",
          width: 160,
          render: (h, params) => {
            if (params.row.gender == 1) {
              return h("div", [
                h("Badge", {
                  props: {
                    status: "success",
                    text: "男"
                  }
                })
              ]);
            } else if (params.row.gender == 2) {
              return h("div", [
                h("Badge", {
                  props: {
                    status: "error",
                    text: "女"
                  }
                })
              ]);
            }
          },
          filters: [
            {
              label: "男",
              value: 1
            },
            {
              label: "女",
              value: 2
            }
          ],
          filterMultiple: false,
          filterMethod(value, row) {
            if (value == 1) {
              return row.sex == 1;
            } else if (value == 2) {
              return row.sex == 2;
            }
          }
        },
        {
          title: "手机号",
          key: "mobile",
          width: 200,
          sortable: true,
          align: "center",
          fixed: "center"
        },
        {
          title: "邮箱",
          key: "email",
          width: 200,
          sortable: true,
          align: "center",
          fixed: "center"
        },
        {
          title: "创建人",
          key: "createBy",
          align: "center",
          fixed: "center",
          width: 100
        },
        {
          title: "创建时间",
          key: "createTime",
          fixed: "center",
          align: "center",
          sortable: true,
          sortType: "desc",
          width: 200
        },
        {
          title: "操作",
          key: "action",
          width: 180,
          align: "center",
          fixed: "right",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  directives: [
                    {
                      name: "has",
                      value: "edit"
                    }
                  ],
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.edit(params.row);
                    }
                  }
                },
                "编辑"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  directives: [
                    {
                      name: "has",
                      value: "delete"
                    }
                  ],
                  on: {
                    click: () => {
                      this.remove(params.row);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ]
    };
  },
  methods: {
    init() {
      this.loadGetDriverPageList();
    },
    handleSelectDepTree(v) {
      this.basicInfoForm.departmentId = v[0];
    },
    handleSelectDep(v) {
      this.searchForm.departmentId = v;
    },
    changePage(v) {
      this.searchForm.current = v;
      this.loadGetDriverPageList();
      this.clearSelectAll();
    },
    changePageSize(v) {
      this.searchForm.size = v;
      this.loadGetDriverPageList();
    },
    selectDateRange(v) {
      if (v) {
        this.searchForm.startDate = v[0];
        this.searchForm.endDate = v[1];
      }
    },
    loadGetDriverPageList() {
      // 多条件搜索用户列表
      this.loading = true;
      // 避免后台默认值
      if (!this.searchForm.type) {
        this.searchForm.type = "";
      }
      if (!this.searchForm.status) {
        this.searchForm.status = "";
      }
      getDriverPageList(this.searchForm).then(res => {
        this.loading = false;
        console.log("getDriverPageList", res);
        if (res.code == 0) {
          this.data = res.data.records;
          this.total = res.data.total;
        }
      });
    },
    handleSearch() {
      this.searchForm.current = 1;
      this.searchForm.size = 20;
      this.loadGetDriverPageList();
    },
    handleReset() {
      this.$refs.searchForm.resetFields();
      this.searchForm.current = 1;
      this.searchForm.size = 20;
      this.selectDate = null;
      this.searchForm.startDate = "";
      this.searchForm.endDate = "";
      this.selectDep = [];
      this.searchForm.departmentId = "";
      // 重新加载数据
      this.loadGetDriverPageList();
    },
    changeSort(e) {
      this.searchForm.sort = e.key;
      this.searchForm.order = e.order;
      if (e.order == "normal") {
        this.searchForm.order = "";
      }
      this.loadGetDriverPageList();
    },
    add() {
      this.modalType = 0;
      this.modalTitle = "添加车主";
      this.$refs.basicInfoForm.resetFields();
      this.basicInfoModalVisible = true;
    },
    edit(v) {
      this.modalType = 1;
      this.modalTitle = "修改车主";
      this.$refs.basicInfoForm.resetFields();
      // 转换null为""
      for (let attr in v) {
        if (v[attr] == null) {
          v[attr] = "";
        }
      }
      let str = JSON.stringify(v);
      let data = JSON.parse(str);
      this.basicInfoForm = data;
      this.basicInfoModalVisible = true;
    },
    remove(v) {
      this.$Modal.confirm({
        title: "确认删除",
        content: "您确认要删除车主 " + v.realName + " ?",
        loading: true,
        onOk: () => {
          deleteDriver(v.driverId).then(res => {
            this.$Modal.remove();
            if (res.code == 0) {
              this.$Message.success("删除成功");
              this.loadGetDriverPageList();
            } else {
              this.$Message.error(res.msg);
            }
          });
        }
      });
    },
    dropDown() {},
    showSelect(e) {},
    clearSelectAll() {
      this.$refs.table.selectAll(false);
    },
    delAll() {},
    /**
     * 提交新增车主
     * @param newForm
     */
    submit() {
      if (this.modalType == 0) {
        this.$refs.basicInfoForm.validate(valid => {
          if (valid) {
            addDriver(this.basicInfoForm).then(
              res => {
                this.$refs.basicInfoForm.resetFields();
                this.basicInfoModalVisible = false;
                this.loadGetDriverPageList();
              },
              error => {
                console.log("submit error", JSON.stringify(error));
              }
            );
          } else {
          }
        });
      } else {
        this.$refs.basicInfoForm.validate(valid => {
          if (valid) {
            updateDriver(this.basicInfoForm).then(
              res => {
                console.log("updateDriver response", JSON.stringify(res));
                this.$refs.basicInfoForm.resetFields();
                this.basicInfoModalVisible = false;
                this.loadGetDriverPageList();
              },
              error => {
                console.log("submitUser error", JSON.stringify(error));
              }
            );
          }
        });
      }
    }
  },
  mounted() {
    this.init();
  }
};
</script>

<style scoped>
</style>
